<template>
  <!--
  @name: HyElTree
  @data: 2024/7/2 15:27
  树形选择器
-->
  <div id="hy-el-tree">
<!--          :load="loadNode"
      lazy-->
    <el-tree
      style="max-width: 600px"
      :props="elShowFieldOption"

      show-checkbox
      :data="props.data?props.data:[]"
      @check-change="handleCheckChange"
    />
  </div>
</template>
<script setup lang="ts">
import type Node from 'element-plus/es/components/tree/src/model/node'
import type {HyElTreeInterface} from "@/interface/HyFormInterface";
let count = 1

interface Tree {
  name: string
}
const props=defineProps<HyElTreeInterface>();

/**
 * element plus 显示字段设置,
 */
const elShowFieldOption = {
  label: props.labelField?props.labelField:"label",
  value: props.valueField?props.valueField:"value",
  children: props.childrenField?props.childrenField:'children',
}

const handleCheckChange = (
  data: Tree,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(data, checked, indeterminate)
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  if (node.level === 0) {
    return resolve([{ name: 'Root1' }, { name: 'Root2' }])
  }
  if (node.level > 3) return resolve([])

  let hasChild = false
  if (node.data.name === 'region1') {
    hasChild = true
  } else if (node.data.name === 'region2') {
    hasChild = false
  } else {
    hasChild = Math.random() > 0.5
  }

  setTimeout(() => {
    let data: Tree[] = []
    if (hasChild) {
      data = [
        {
          name: `zone${count++}`,
        },
        {
          name: `zone${count++}`,
        },
      ]
    } else {
      data = []
    }

    resolve(data)
  }, 500)
}
</script>
<style scoped>

</style>
